<template>
    <div class="edu-page-warp">
        <div class="coursemap">
            <a @click="previewCourse" style="color:#C0C4CC" >毕业结论不一致说明申请</a>
            <span style="color:#C0C4CC">/</span>
            <span style="color:#909399">查看</span>
        </div>
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="onSubmit"
            @reset="reset('queryForm')"
        >
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="120px">
                <el-row :gutter="24" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item filterable :label="$t('label.major') + ':'" prop="profession">
                            <el-select v-model="queryForm.profession"  clearable filterable @change="changeProfession" style="width: 100%">
                                <el-option
                                    v-for="item in options.profession"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('auditStandard.proDirection') + ':'" prop="directionCode">
                          <el-select v-model="queryForm.directionCode" style="width: 100%" filterable clearable>
                            <el-option v-for="item in options.direction" :key="item.key" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item filterable :label="$t('graduationList.approvalStatus') + ':'" prop="conclusionConformitySubmit">
                            <el-select v-model="queryForm.conclusionConformitySubmit"  clearable filterable style="width: 100%">
                                <el-option
                                    v-for="item in options.submit"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>                  
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{ title }}</h1>
            <div class="div-main clearfix">   
                <div class="float-left">
                    <el-input
                        v-model="queryForm.name"
                        :placeholder="$t('graduationList.please')"
                        prefix-icon="el-icon-search"
                        @change="handleSearch"
                    />
                </div>
                <div class="float-right">
                    <el-button type="primary"  @click="exportFile">
                        {{ $t('graduationList.exportInconsistent') }}
                    </el-button>
                </div>
            </div>
            <EduTable
                :data="tableData"
                :total="queryForm.total"
                :pageSize="queryForm.pageSize_"
                :page-num="queryForm.pageNum_"
                @page-change="handleCurrentChange"
            >
                <el-table-column :label="$t('graduationList.studentID')" prop="studentId"></el-table-column>
                <el-table-column :label="$t('graduationList.name')" prop="name"></el-table-column>
                <el-table-column :label="$t('label.major')" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-text="scope.row.professionName || scope.row.professionI18n"></span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('auditStandard.proDirection')" prop="directionName" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.machineReviewNotes')" prop="machineRemark" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.details')" prop="machineDetails" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.machineReviewConclusion')" prop="machineConclusionI18n" width="165" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.collegeAuditConclusion')" prop="manualConclusionI18n" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.inconsistentConclusions')" prop="conclusionConformityExplain" width="140" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('graduationList.approvalStatus')">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 2" type="success" size="mini">{{ $t("graduationList.passed") }}</el-tag>
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 3" type="warning" size="mini">{{ $t("graduationList.failed") }}</el-tag>
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 1" type="info" size="mini">{{ $t("graduationList.pending") }}</el-tag>
                        <el-tag v-if="scope.row.conclusionConformitySubmit == 0" type="danger" size="mini">{{ $t("graduationList.unsubmitted") }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('graduationList.operating')" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editRow(scope.row)" size="mini" :disabled="scope.row.conclusionConformitySubmit == 2 || scope.row.conclusionConformitySubmit == 3">
                           {{ $t("common.btn.edit") }}
                        </el-button>
                    </template>
                </el-table-column>
            </EduTable>
        </el-card>
        <!--导入弹框-->
        <edu-dialog ref="uploadDialog"
                    :title="$t('graduationList.exportInconsistent')"
                    :confirmBtnText="$t('graduationList.submitReview')"
                    size="small"
                    @close="clearFiles"
                    @confirm="uploadFile">
            <el-form v-loading="loading2"
                    ref="createStudentForm"
                    :model="createStudentForm"
                    label-width="85px">
                <el-row>
                    <el-form-item>
                    <el-upload ref="upload"
                                :data="{}"
                                :on-success="uploadDone"
                                :auto-upload="false"
                                :multiple="false"
                                :on-change="(file, fileList)=>{ this.fileList = fileList}"
                                :limit="1"
                                :accept="'.xlsx'"
                                :action="importUrl">
                        <el-button slot="trigger"
                                size="small"
                                type="primary">{{ $t('label.selectFile') }}
                        </el-button>
                        <el-button size="small" @click="downloadFile">{{ $t('graduationList.templateDownload') }}</el-button> 
                        <div slot="tip"
                            class="el-upload__tip">{{ $t('courseTake.uploadXLSFileOnly') }}
                        </div>
                    </el-upload>
                    </el-form-item>
                </el-row>
            </el-form>
        </edu-dialog>
        <div>
            <edu-dialog
                :title="$t('graduationList.editInconsistentConclusions')"
                size="small"
                :visible.sync="inconsistent.show"
                :autoHeight="true"
                :confirmBtnText="$t('common.btn.confirm')"
                :close-on-click-modal="false"
                @close="closeInconsist('inconsistentForm')"
                @confirm="confirmInconsist('inconsistentForm')"
            >
                <el-form
                    :model="inconsistent.form"
                    ref="inconsistentForm"
                    label-width="120px"
                    label-position="right"
                    label-suffix=":"
                    size="small"
                >
                    <el-row>
                        <el-col :span="20">
                            <el-form-item :label="$t('graduationList.studentID')">
                               {{inconsistent.form.studentId}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="20">
                            <el-form-item :label="$t('graduationList.name')">
                                {{inconsistent.form.name}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="22">
                            <el-form-item :label="$t('graduationList.inconsistentConclusions')" prop="conclusionConformityExplain">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 3, maxRows: 5}"
                                    :clearable="true"
                                    :placeholder="$t('message.plsInput')"
                                    v-model.trim="inconsistent.form.conclusionConformityExplain"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </edu-dialog>
        </div>
    </div>
</template>
<script>
import {findConclusionConformityApplyList,findProfessionList, editIConclusionDesc} from 'common/src/api/graduationManagement/graduationList'
import manageApi from 'common/src/api/graduationManagement/graduationManage';
export default {
    name: "graduationApplyDetails",
    data() {
        return {
            // 筛选相关选项
            queryForm: {
                isOverseas: "1",
                graduationDate: this.$route.params.grade, 
                faculty: this.$route.params.facultyCode, 
                profession: "", 
                conclusionConformitySubmit: "", 
                pageNum_: 1,
                pageSize_: 20,
                name:"",
                total: 0,
                isConclusionConformity: "2",
                directionCode: ''
            },
            importUrl:"",
            title:"",
            // 下拉相关选项数据
            options: {
                profession: [],
                submit: [
                    {
                        value: "0",
                        label: this.$t("graduationList.unsubmitted")
                    },
                    {
                        value: "1",
                        label: this.$t("graduationList.pending")
                    },
                    {
                        value: "2",
                        label: this.$t("graduationList.passed")
                    },
                    {
                        value: "3",
                        label: this.$t("graduationList.failed")
                    }
                ],
                direction: []
            },
            tableData: [],
            inconsistent: {
                show: false,
                form: {
                    conclusionConformityExplain: ''
                },
                rules: {
                    conclusionConformityExplain: [
                        {
                            trigger: 'blur',
                            validator: (rule, value, callback) => {
                                if (!value) {
                                    callback(new Error(this.$t('message.plsInput')));
                                }else {
                                    callback();
                                }
                            }
                        }
                    ],
                }
            }
        };
    },

    created() {
        this.getMajorOptions();
        this.getMajorMap();
        this.title = this.$route.params.faculty + this.$route.params.grade + "年审核结论不一致名单"
        this.currentPath = this.$route.path;
    },
    mounted() {
        this.handleSearch();
    },
    methods: {
        handleSearch() {
            findConclusionConformityApplyList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.queryForm.pageNum_ = res.data.pageNum_;
                    this.queryForm.pageSize_ = res.data.pageSize_;
                    this.queryForm.total = res.data.total_;
                }
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val.pageNum;
            this.queryForm.pageSize_ = val.pageSize;
            this.handleSearch();
        },
        selectionChange(selection) {
            const self = this;
            self.multipleSelection = selection;
        },
        getMajorOptions() {
            this.options.profession = [];
            this.queryForm.profession = "";
            findProfessionList({
                faculty: this.$route.params.facultyCode,
                graduationDate: Number(this.$route.params.grade),
                isOverseas: "1"
            })
            .then(res => {
                if (res.code == 200) {
                    this.options.profession = res.data.map((item, index) => {
                        item.professionI18n = item.professionName || item.professionI18n;
                        return {
                            label: item.professionI18n + '-' + item.professionCode,
                            value: item.professionCode
                        }
                    })
                }
            });
        },

        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.handleSearch();
        },
        reset(ref) {
            this.options.direction = [];
            this.queryForm.name = "";
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.$refs[ref].resetFields();
            this.handleSearch();
        },

        exportFile() {
            this.importUrl = '';
            this.$refs.uploadDialog.open();
            this.importUrl = '/api/graduationservice/graduateList/importConclusionConformityApply?graduationDate='+this.$route.params.grade+'&isOverseas=1'+'&faculty='+this.$route.params.facultyCode

        
        },
        uploadFile() {
			if (_.isEmpty(this.fileList)) {
				this.$message({
					type: "info",
					message: this.$t("message.selectFilePlease")
				});
				return;
			}
			this.$refs.upload.submit();
        },
        // 关闭弹出框
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.$refs.uploadDialog.close();
        },
        // 导入成功
        uploadDone(res) {
            if (res.code == 200) {
                this.$message({
                    type: 'success',
                    message: this.$t('common.tips.uploadSuccess')
                });
                this.handleSearch();
            }else{
                this.$message({
                    type: 'error',
                    message: res.msg
                });
                return 
            }
            this.clearFiles();
        },
        downloadFile(){
            window.location.href = '/api/graduationservice/graduateList/exportConclusionConformityTemplate';
        },
        previewCourse(){
            this.$router.push({
                name: 'internationalGraduationManagement/graduationApply',
            })
        },
        changeProfession() {
            this.initDirection();
        },
        getMajorMap() {
            this.professionMap = {};
            let grade = this.$route.params.grade;
            if (!grade) {
                return;
            }
            manageApi.getProfessionByGrade({
                faculty: this.$route.params.facultyCode,
                graduateDate: grade,
            })
            .then(res => {
                if (res.code == 200) {
                    let data = res.data || [];
                    data.forEach((item, index) => {
                        this.professionMap[item.professionCateGory] = item.grade; 
                    })
                }
            });
        },
        initDirection() {
            this.options.direction = [];
            this.queryForm.directionCode = '';
            if (this.queryForm.profession) {
                let grade = this.professionMap && this.professionMap[this.queryForm.profession];
                if (!grade) {
                    return;
                }
                let params = {
                    pageNum_: 1,
                    pageSize_: 20,
                    grade: grade + '',
                    professionCode: this.queryForm.profession
                };
                manageApi.findDirMaintenList(params).then(res => {
                    if (res && res.code === 200) {
                        let listData = res.data && res.data.list || [];
                        let options = [];
                        listData.forEach(item => {
                            if (item.code) {
                                options.push({
                                    key: item.code,
                                    value: item.code,
                                    label: item.name
                                })
                            }
                        })
                        this.options.direction = options;
                    }
                })
            }
        },
        async confirmInconsist(ref) {
            // this.$refs[ref].validate(async valid => {
            //     if (!valid) {
            //         return;
            //     }else {
                    
            //     }
            // })
            let {conclusionConformityExplain, id} = this.inconsistent.form;
            let param = {
                id,
                conclusionConformityExplain: conclusionConformityExplain || '',
                isOverseas: this.queryForm.isOverseas
            }
            let {code} = await editIConclusionDesc(param);  
            if (code == 200) {
                this.$message({
                    type: "success",
                    message: this.$t('common.tips.opSuccess')
                });
                this.closeInconsist('inconsistentForm');
                this.onSubmit();
            }

        },
        closeInconsist(ref) {
            this.$refs[ref].resetFields();
            this.inconsistent.show = false;
        },
        editRow(row) {
            this.inconsistent.show = true;
            this.inconsistent.form = {...row};
        }
    },
    destroyed() {
        this.currentPath && this.$store.commit('delete_tabs', this.currentPath); 
    }
};
</script>
<style lang="scss" scoped>
    .div-main {
        margin-bottom: 16px;
    }
    .coursemap{
        margin-bottom: 10px;
    }
</style>

